<template>
	<div class="policy" id="policy">
		<div class="st_t1">
			安全策略
		</div>

		<ion-content>
			<div id="main" style="width: 600px;height:400px;"></div>
		</ion-content>
	</div>
</template>

<script>
	import echarts from 'echarts';
	export default {
		name: 'policy',
		computed: {},
		data() {
			return {
				title: '',
			}
		}, //定义变量
		components: {}, //注册组件
		methods: { //方法都在这里
		},
		mounted() {
			var that = this;

			var myChart = echarts.init(document.getElementById('main'));

			var option = {
				title: {
					text: '南丁格尔玫瑰图',
					subtext: '纯属虚构',
					x: 'center'
				},
				tooltip: {
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				legend: {
					x: 'center',
					y: 'bottom',
					data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
				},
				toolbox: {
					show: true,
					feature: {
						mark: {
							show: true
						},
						dataView: {
							show: true,
							readOnly: false
						},
						magicType: {
							show: true,
							type: ['pie', 'funnel']
						},
						restore: {
							show: true
						},
						saveAsImage: {
							show: true
						}
					}
				},
				calculable: true,
				series: [{
					name: '半径模式',
					type: 'pie',
					radius: [20, 110],
					center: ['25%', '50%'],
					roseType: 'radius',
					label: {
						normal: {
							show: false
						},
						emphasis: {
							show: true
						}
					},
					lableLine: {
						normal: {
							show: false
						},
						emphasis: {
							show: true
						}
					},
					data: [{
						value: 10,
						name: 'rose1'
					}, {
						value: 5,
						name: 'rose2'
					}, {
						value: 15,
						name: 'rose3'
					}, {
						value: 25,
						name: 'rose4'
					}, {
						value: 20,
						name: 'rose5'
					}, {
						value: 35,
						name: 'rose6'
					}, {
						value: 30,
						name: 'rose7'
					}, {
						value: 40,
						name: 'rose8'
					}]
				}, {
					name: '面积模式',
					type: 'pie',
					radius: [30, 110],
					center: ['75%', '50%'],
					roseType: 'area',
					data: [{
						value: 10,
						name: 'rose1'
					}, {
						value: 5,
						name: 'rose2'
					}, {
						value: 15,
						name: 'rose3'
					}, {
						value: 25,
						name: 'rose4'
					}, {
						value: 20,
						name: 'rose5'
					}, {
						value: 35,
						name: 'rose6'
					}, {
						value: 30,
						name: 'rose7'
					}, {
						value: 40,
						name: 'rose8'
					}]
				}]
			};

			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
			//获取banner
		},
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	.policy {
		text-align: left;
		.st_t1 {
			padding: 15px 20px;
			background: #f4f4f4;
			width: 100%;
			text-align: left;
			font-size: 24px;
		}
	}
</style>